﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dribble Ball</title>
    <link rel="stylesheet" href="../css/db.css" />
    <link rel="stylesheet" href="../css/colorbox.css" />
    <style>
        #shoot
        {
            font-size: 160px;
            text-anchor: middle;
            stroke-width: 0;
            fill: gray;
            opacity: 0.1;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
     <script type="text/javascript" src="../js/track.js"/>
</head>
<body>
    <div id="status">
        <div id="counter">
        </div>
    </div>
    <div id="win">
        <svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" version="1.1">
            <g id="back">
                <text id="shoot" y="190" x="400">
                </text>
            </g>
            <g id="main">
                <line x1="0" y1="0" x2="0" y2="600" db-pad="wood" />
                <line x2="0" y2="0" x1="800" y1="0" db-pad="border" />
                <line x1="0" y1="600" x2="800" y2="600" db-pad="ground" />
                <line x1="630" y1="250" x2="790" y2="250" db-cat="target" class="target" />
                <line x2="630" y2="255" x1="790" y1="255" db-pad="wood" class="target2" />
                <circle cx="630" cy="250" r="6" db-pad="wood" class="target" />
                <circle cx="790" cy="250" r="6" db-pad="wood" class="target2" />
                <line x2="800" y2="0" x1="800" y1="600" db-pad="wood" />
            </g>
            <rect id="dummy" width="100%" height="100%" fill-opacity="0">
            </rect>
            <g id="front">
            </g>
        </svg>
    </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.countdown.js"></script>
    <script type="text/javascript" src="../js/jquery.colorbox.js"></script>
    <script type="text/javascript" src="../js/svg.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(function () {
            var count = 0;
            db.gameEnded = function (win) {
                if (!db.isEnded) {
                    if (win) {
                        count++;
                        $("#shoot").html(count);
                    }
                    else {
                        db.isEnded = true;
                        var html = "<h1>" + count + "</h1>" + "<img style='height:155px; width:125px; margin-left:107px' src='../img/break.jpg'/><br/>" + db.getPopControls({ upLink: "../main.xhtml" });
                        $.colorbox({ width: 400, height: 500, overlayClose: false, html: html });
                    }
                }
            };

            db.path = [{ x: 400, y: 300 }, { x: 401, y: 300}];

            startGame({
                time: 99,
                ballPosition: { x: 100, y: 400 }
            });

            var x1 = 630, x2 = 790;
            var x = 630;
            var dir = -1;
            db.setTimer(null, function () {
                if (x1 <= 0 || x2 >= 800)
                    dir *= -1;
                x1 += dir;
                x2 += dir;
                x += dir;
                $("line[class='target']").attr({ x1: x1, x2: x2 });
                $("line[class='target2']").attr({ x1: x2, x2: x1 });
                $("circle[class='target']").attr({ cx: x });
                $("circle[class='target2']").attr({ cx: x + 160 });
                $("#main > image").attr("x", x);
            })
        });
        //]]>
    </script>
</body>
</html>
